<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>变大变小</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background: red url() 0 0 no-repeat;
		}

	</style>
	<script type="text/javascript">
		window.onload = function  () {
			//捉取元素
			box = document.getElementById('box');
			btn = document.getElementById('btn');

			//加点击事件
			btn.onclick  = function  () {
				if(btn.value=="开始"){
					//开定时器
					time = setInterval(run, 10);
					btn.value="停止";
				}else{
					//停定时器
					clearInterval(time);
					btn.value="开始";
				}
			}
			//控制方向的变量
			add = true;

			//循环执行的方法 
			function run () {

				// 获取原来的宽度
				width = window.getComputedStyle ? window.getComputedStyle(box,null).width : box.currentStyle.width;
				//转整
				width = parseInt(width);
				//控制方向 
				if(width>=400){
					add = false;
				}

				if(width<=200){
					add= true;
				}

				//控制加大加小
				if(add){
					box.style.width=(width+5)+"px";
					box.style.height=(width+5)+"px";
				}else{
					box.style.width=(width-5)+"px";
					box.style.height=(width-5)+"px";
				}
				
			}

			/**
			 * [getYdTime 元旦日期操作]
			 * @Author   Xuebingsi
			 * @DateTime 2017-04-28T15:39:33+0800
			 * @return   {[type]}                 [description]
			 */
			function getYdTime () {
				yudang = new Date('2018-01-01 00:00:00');

				yudangTime = yudang.getTime()/1000;

				now = new Date();

				nowTime = now.getTime()/1000;

				diffTime = yudangTime-nowTime;

				day = Math.floor(diffTime/86400);

				hoursTime = diffTime%86400;

				hours= Math.floor(hoursTime/3600);

				minTime = hoursTime%3600;

				min= Math.floor(minTime/60);

				miao = Math.floor(minTime%60);

				document.getElementById('xbsday').innerHTML=day;
				document.getElementById('xbshours').innerHTML=hours;
				document.getElementById('xbsmin').innerHTML=min;
				document.getElementById('xbsmiao').innerHTML=miao;


			}

			setInterval(getYdTime, 1000);

		}
	</script>
</head>
<body>
	<input type="button" id="btn" value="开始">
	<div class="box" id="box"></div>
	天<span id="xbsday"></span>
	小时<span id="xbshours"></span>
	分钟<span id="xbsmin"></span>
	秒<span id="xbsmiao"></span>
</body>
</html>